<template>
    <view class="fm">
        <view class="fm_top flsex">
            <view class="fm_top_li">监测时间</view>
            <view class="fm_top_li">监测时长</view>
            <view class="fm_top_li">状态</view>
        </view>
        <view v-if="historylist.length==0" class="page_dcenter_null">
            <img class="page_dcenter_null_img" src="../../static/img_null_bookbuilding.png" />
            <view>暂无记录</view>
        </view>
        <scroll-view v-else scroll-y class="pagses">
            <view
                class="fm_top bg-white"
                @click="goactive(item)"
                v-for="(item, index) in historylist"
                :key="index"
            >
                <view class="fm_top_li">{{item.createTime}}</view>
                <view class="fm_top_li">{{gettime(item.costTime)}}</view>
                <view class="fm_top_li">{{getstatus(item.status)}}</view>
            </view>
            <div v-if="historylist.length>15" class="pagses_b">到底了~</div>
        </scroll-view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            historylist: [],
            historylists: [],
            statuslist: [
                { value: 1, name: "未上传" },
                { value: 2, name: "已上传" },
                { value: 3, name: "待解读" },
                { value: 4, name: "已解读" },
                { value: 5, name: "建议门诊" },
            ],
        };
    },
    async onPullDownRefresh() {
        // to doing..
        this.lodingtop();
        // 停止下拉刷新
    },
    onLoad(option) {
        var _this = this;
        if (option.id) {
        }
        _this.getList();
    },
    methods: {
        goactive(itm) {
            uni.navigateTo({
                url: "./fetalMonitoringComs/FHRDe?id=" + itm.id+'&status='+itm.status,
                animationType: "pop-in",
                animationDuration: 200,
            });
        },
        lodingtop() {
            this.getList();
            uni.stopPullDownRefresh();
        },
        getstatus(val) {
            for (var i = 0; i < this.statuslist.length; i++) {
                if (val == this.statuslist[i].value) {
                    return this.statuslist[i].name;
                }
            }
            return "";
        },
        gettime(milliSecond) {
            return this.geuti(milliSecond / 1000);
        },
        geuti(tims) {
            // 计算
            var h = 0,
                i = 0,
                s = parseInt(tims);
            if (s > 60) {
                i = parseInt(s / 60);
                s = parseInt(s % 60);
                if (i > 60) {
                    h = parseInt(i / 60);
                    i = parseInt(i % 60);
                }
            }
            // 补零
            var zero = function (v) {
                return v >> 0 < 10 ? "0" + v : v;
            };
            // return [zero(h),zero(i),zero(s)].join(":");
            return [zero(i), zero(s)].join(":");
        },
        getList() {
            const data = {
                monitorTypeId: "316257832473473024",
            };
            // 【移动端】获取用户监测历史记录（胎监，胎心）
            var _this = this;

            _this.$ajaxs
                .get("/mobile/v1/monitor/getMonitorHistory", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
    },
};
</script>

<style scoped lang="scss">
.fm,
.page {
    height: 100%;
}
.fm {
    height:100vh;
    padding-top: 44px;
    margin-top: -44px;
    .pagses {
        height: calc(100% - 100upx);
        overflow-x: auto;
    }
    .fm_top {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        text-align: center;
        background: #f8f8f8;
        .fm_top_li {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            height: 100upx;
            line-height: 100upx;
        }
        .fm_top_li:nth-of-type(3) {
            -webkit-box-flex: 0 0 150upx;
            -ms-flex: 0 0 150upx;
            flex: 0 0 150upx;
        }
    }
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
        div {
            color: #999;
            font-size: 28upx;
            height: 40upx;
            line-height: 40upx;
        }
    }
    .bg-white {
        background: #fff;
        border-bottom: 1px solid #ddd;
        .fm_top_li {
            color: #333;
            font-size: 28upx;
        }
    }
    .pagses_b {
        text-align: center;
        font-size: 24upx;
    }
}
</style>